<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.text.NumberFormat"%>
<%@ page import="hmg.common.CommonUtils"%>
<%@ page import="hmg.vo.CodeVO"%>
<%@ page import="hmg.vo.BoardVO"%>
<%@ page import="hmg.vo.FileVO"%>
<%@ page import="java.util.List"%>
<%--
    JSP Name : jspName.jsp
    Description : 설명을 기술합니다.
    author Kim hyung soo
    since 2012. 8. 15.
    version 1.0
    Modification Information
       since          author              description
    ===========    =============    ===========================
    2012. 8. 15.     Kim hyung soo     최초 생성
--%>
<%
    BoardVO news = (BoardVO) request.getAttribute("NewsInfo");
    List<FileVO> imageList = (List<FileVO>) request.getAttribute("ImageList");
    BoardVO prevNews = (BoardVO) request.getAttribute("PrevNewsInfo");
    BoardVO nextNews = (BoardVO) request.getAttribute("NextNewsInfo");
    Integer prevNewsCount = (Integer) request.getAttribute("PrevNewsCount");

    Integer totalNews = (Integer) request.getAttribute("TotalNews");

    List<CodeVO> bizList = (List<CodeVO>) request.getAttribute("BizList");
    List<CodeVO> compList = (List<CodeVO>) request.getAttribute("CompList");

    String listType = CommonUtils.getParameter(request.getParameter("listType"), "0");
    String compType = CommonUtils.getParameter(request.getParameter("compType"), "");
    String searchCondition = CommonUtils.getParameter(request.getParameter("searchCondition"), "");
    String searchKeyword = CommonUtils.getParameter(request.getParameter("searchKeyword"), "");

    Integer currPage = 1;

    if (prevNewsCount != null)
        currPage = prevNewsCount / 4 + 1;

    int currentListID = 0;
    if (news != null)
        currentListID = news.getListID();

    NumberFormat nf = NumberFormat.getInstance();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ko" xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>뉴스 | 현대자동차그룹</title>
<meta name="description" content="현대자동차그룹 보도자료, 뉴스 게시판" />
<meta name="keywords" content="그룹소식, 계열사소식, 제품/기술, 수상/활동, 공헌/환경, 문화/예술, 기타/마케팅" />
<%@ include file="/WEB-INF/jsp/web/kor/include/header.jspf" %>
<script type="text/javascript" src="/hmg/js/web/kor/com/widjet.js"></script>
<script type="text/javascript" src="/hmg/js/web/kor/com/mouse.js"></script>
<script type="text/javascript" src="/hmg/js/web/kor/com/slider.js"></script>
<script type="text/javascript">
//<![CDATA[
var page = <%= currPage %>;
var totalNews = <%= totalNews %>;
var totalPages = <%= (totalNews - 1) / 4 + 1 %>;

$(function() {
    $( "#slider" ).slider({
        value: page,
        min: 1,
        max: totalPages,
        step: 1,
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.value );
            fn_move_list_slider(ui.value);
        }
    });
    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});

$(function() {
    var totalPanels = $(".groupNews_scrollContainer").children().size();
    var movingDistance  = 585;
    var $panels = $('#groupNews_gallery_slider .groupNews_scrollContainer > div');
    var $container = $('#groupNews_gallery_slider .groupNews_scrollContainer');
    var curPanel = 0;
    var scroll = $('#groupNews_gallery_slider .groupNews_scrollContainer').css('overflow', 'hidden');
    $panels.css({'float' : 'left','position' : 'relative'});
    $container.css('width', ($panels[0].offsetWidth * $panels.length) + 100 ).css('left', "0px");
    $("#groupNews_gallery_slider").data("currentlyMoving", false);

    function change(direction, moveIndex) {
        if((direction && !(curPanel < totalPanels - 1)) || (!direction && (curPanel <= 0))) { return false; }
        if (($("#groupNews_gallery_slider").data("currentlyMoving") == false)) {
            $("#groupNews_gallery_slider").data("currentlyMoving", true);
            var next = direction ? curPanel + moveIndex : curPanel - moveIndex;
            var leftValue = $(".groupNews_scrollContainer").css("left");
            var movement = direction ? parseFloat(leftValue, 10) - (movingDistance * moveIndex) : parseFloat(leftValue, 10) + (movingDistance * moveIndex);
            var curThumb = $("#groupNews_thumbImg li.on");
            var removeClassEl = direction ? $(curThumb).next() : $(curThumb).prev();
            $(".groupNews_scrollContainer").stop().animate({"left": movement}, function() {$("#groupNews_gallery_slider").data("currentlyMoving", false);   });
            $(removeClassEl).addClass("on");
            $(curThumb).removeClass("on");
            curPanel = next;
        }
    }

    $("#groupNews_thumbImg li").click(function(){
        if(!($(".groupNews_scrollContainer").is(":animated"))){
            var curElSize = $("#groupNews_thumbImg li.on").index();
            var clickElSize = $(this).index();
            if(curElSize !== clickElSize){
                if(curElSize > clickElSize){
                    change(false, (curElSize-clickElSize));
                }
                else if(curElSize < clickElSize){
                    change(true, (clickElSize-curElSize));
                }
                curPanel = clickElSize;
                $("#groupNews_thumbImg li").removeClass("on");
                $(this).addClass("on");
            }
        }
    });

    $(".rightBig").click(function(){ change(true, 1); });
    $(".leftBig").click(function(){ change(false, 1); });

});

$(document).ready(function(){
    if (page == "")
        page = 1;

    $("#newsTab<%= listType %>").addClass("on");

    if (totalNews == 0)
        $("#groupNews_detailImgWrap").hide();
    else if (totalPages > page)
        $("#rightArrow").show();

    if (page > 1)
        $("#leftArrow").show();

    fn_get_newsThumbnailList();
});

$(function() {
    var pictureInfo = $(".groupNews_gallery_panel");
    var moreInfo = $(".more_info");

    $(pictureInfo).click(
    function () {$(moreInfo).toggle();
    });
});

//tab
$(document).ready(function() {
var newsTab = $(".groupNews_Tab ul li");

    $(newsTab).click(function(){
        $(newsTab).removeClass("on");
        $(newsTab).eq($(this).index()).addClass("on");
    });
});

function fn_list_by_type(listType) {
    document.location.href = "./NewsImageList.do?listType=" + listType + "&compType=<%= compType %>&listID=&page=" + page;
}

function fn_main_article(article_id) {
    document.location.href = "./NewsImageList.do?listType=<%= listType %>&compType=<%= compType %>&listID=" + article_id + "&page=" + page;
}

function fn_move_view() {
    document.location.href = "./NewsView.do?listID=<%= currentListID %>&listType=<%= listType %>&compType=<%= compType %>&listFlag=2&page=" + page;
}

function fn_get_newsThumbnailList() {
    $.ajax({
        type:"post",
        url:"./AjaxThumbnailNewsList.do",
        data:({page:page, listType:"<%= listType %>", compType:"<%= compType %>", listID:"<%= currentListID %>"}),
        success: function(data) { fn_get_newsThumbnailList_proc(data); }
    });
}

function fn_move_list_left() {
    page--;

    if (totalNews > 4)
        $("#rightArrow").show();

    if (page < 1) {
        page = 1;
        $("#leftArrow").hide();
    }
    else {
        if (page == 1)
            $("#leftArrow").hide();

        fn_get_newsThumbnailList();
    }

    $( "#slider" ).slider({
        value: page,
        min: 1,
        max: totalPages,
        step: 1,
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.value );
            fn_move_list_slider(ui.value);
        }
    });
}

function fn_move_list_right() {
    page++;

    $("#leftArrow").show();

    if (Math.floor(totalNews / 4) < page)
        $("#rightArrow").hide();

    fn_get_newsThumbnailList();

    $( "#slider" ).slider({
        value: page,
        min: 1,
        max: totalPages,
        step: 1,
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.value );
            fn_move_list_slider(ui.value);
        }
    });
}

function fn_move_list_slider(value) {
    page = value;

    if (page == 1) {
        $("#leftArrow").hide();

        if (totalNews <= 4)
            $("#rightArrow").hide();
        else
            $("#rightArrow").show();
    }
    else {
        $("#leftArrow").show();

        if (Math.floor(totalNews / 4) < page)
            $("#rightArrow").hide();
        else
            $("#rightArrow").show();
    }

    fn_get_newsThumbnailList();

}

function fn_get_newsThumbnailList_proc(data) {
    fn_get_currentNewsOrder();
    $("#thumbnailList").html(data);
}

function fn_get_currentNewsOrder() {
    if (page * 4 < totalNews)
        $("#currentNewsOrder").html(((page - 1) * 4 + 1) + " ~ " + (page * 4));
    else
        $("#currentNewsOrder").html(((page - 1) * 4 + 1) + " ~ " + totalNews);
}

//]]>
</script>
</head>
<body>
    <!--wrap-->
    <div id="wrap">
        <!-- skip navigation -->
        <div id="skipnavition">
            <a href="#gnb">메뉴바로가기</a><a href="#content">본문바로가기</a>
        </div>
        <!--// skip navigation -->

        <hr />

        <!-- header-->
        <%@ include file="/WEB-INF/jsp/web/kor/include/left.jspf" %>
        <!--//header-->

        <hr />

        <!--container-->
        <div id="container">
            <div class="scroll-pane">
            <!-- 공통 -->
            <div class="subTitle">
                <div class="pageTitle">
                    <h2><img src="/hmg/images/web/kor/title/group_News_List.gif" alt="뉴스" /></h2>
                    <p class="subCopy"><img src="/hmg/images/web/kor/title/group_News_List_desc.gif" alt="그룹의 생생한 뉴스를 담은 보도자료" /></p>
                </div>

                <div class="pageLocation">
                    <ul>
                        <li><a href="/hmg/web/kor/Main.do"><img src="/hmg/images/web/kor/common/location_home.gif" alt="홈"/></a></li>
                        <li><a href="/hmg/web/kor/grn/GroupNewsSubMain.do">그룹소식</a></li>
                        <li class="nowPage"><a href="/hmg/web/kor/grn/nws/NewsList.do">뉴스</a></li>
                    </ul>
                </div>
            </div>
            <!--//공통-->

            <!--contents-->
            <div id="content">
            <!-- 내용 -->
            <div class="groupNews">
                <div class="groupNews_Tab">
                    <ul>
                        <li id="newsTab0" class="tab01"><a href="javascript:fn_list_by_type(0);"><span>전체보기</span></a></li>
                        <li id="newsTab1" class="tab02"><a href="javascript:fn_list_by_type(1);"><span>제품/기술</span></a></li>
                        <li id="newsTab2" class="tab03"><a href="javascript:fn_list_by_type(2);"><span>수상/활동</span></a></li>
                        <li id="newsTab3" class="tab04"><a href="javascript:fn_list_by_type(3);"><span>사회공헌</span></a></li>
                        <li id="newsTab99" class="tab05"><a href="javascript:fn_list_by_type(99);"><span>환경</span></a></li>
                    </ul>
                </div>

                <div class="groupNews_Btn">
                    <div class="left_Btn">
                        <a href="/hmg/web/kor/grn/nws/NewsList.do?listType=<%= listType %>&compType=<%= compType %>&page=1"><img src="/hmg/images/web/kor/btn/btn_list.gif" alt="list" /></a>
                        <a href="/hmg/web/kor/grn/nws/NewsImageList.do?listType=<%= listType %>&compType=<%= compType %>&listID="><img src="/hmg/images/web/kor/btn/btn_imageOn.gif" alt="image" /></a>
                    </div>
                    <div class="right_Btn">
                        <a href="#"><img src="/hmg/images/web/kor/btn/btn_select.gif" alt="image" /></a>
                    </div>
                </div>

               <!--companyWrap-->
                <div class="companyWrap" style="top:94px;">
                    <div class="companyList">
                        <table summary="계열사 목록">
                        <caption>계열사목록</caption>
                            <colgroup>
                                <col width="13.5%" />
                                <col width="13%" />
                                <col width="13%" />
                                <col width="14.5%" />
                                <col width="16%" />
                                <col width="15.5%" />
                                <col width="14.5%" />
                            </colgroup>
                            <thead>
                                <tr>
<%
    for (int idx = 0; idx < bizList.size(); idx++) {
        CodeVO biz = bizList.get(idx);

        if (idx + 1 < bizList.size())
            out.println("                                    <th scope=\"col\">" + biz.getNameKo() + "</th>");
        else
            out.println("                                    <th scope=\"col\" class=\"last\">" + biz.getNameKo() + "</th>");
    }
%>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
<%
    String prevBizCode = "";
    for (int idx = 0; idx < compList.size(); idx++) {
        CodeVO comp = compList.get(idx);

        if (comp.getUpperValue().equals(prevBizCode) != true) {
            prevBizCode = comp.getUpperValue();

            if (idx == 0)
                out.println("                                    <td class=\"first\">");
            else if (prevBizCode.equals(bizList.get(bizList.size() - 1).getValue()) == true) {
%>
                                        </ul>
                                    </td>
                                    <td class="last">
<%
            }
            else {
%>
                                        </ul>
                                    </td>
                                    <td>
<%
            }

            out.println("                                        <ul>");
        }

        out.println("                                            <li><a href=\"./NewsImageList.do?listType=" + listType + "&compType=" + comp.getValue() + "&listID=&page=1\">" + comp.getNameKo() + "</a></li>");
    }
%>
                                        </ul>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <a href="#" class="compListClose"><img src="/hmg/images/web/kor/btn/btn-close.gif" alt="닫기" /></a>
                    </div>
                </div>
                <!--//companyWrap-->

                <div class="groupNews_SlideWrap">
                    <div class="groupNews_Slide">
                        <div id="groupNews_gallery_wrapper">
                            <div id="groupNews_gallery_slider">
                                <div style="overflow: hidden;" class="groupNews_gallery_scroll">
                                    <div class="groupNews_scrollContainer">
<%  if (news == null) { %>
                                        <div style="height:20px; margin-top:200px; position:relative; text-align:center; width:485px;">등록된 게시물이 없습니다.</div>
<%
    }
    else {
%>
                                        <div class="groupNews_gallery_panel">
<%
        if (imageList == null || imageList.size() == 0)
            out.println("                                            <img src=\"/hmg/images/logo.png\" />");
        else
            out.println("                                            <img src=\"" + imageList.get(0).getFilePath() + "\" />");
%>
                                        </div>
<%
        if (imageList != null && imageList.size() > 0) {
            for (int idx = 1; idx < imageList.size(); idx++) {
%>
                                        <div class="groupNews_gallery_panel">
                                            <img src="<%= imageList.get(idx).getFilePath() %>" alt="" />
                                        </div>
<%
            }
        }
    }
%>
                                    </div>
<%  if (news != null) { %>
                                    <div class="more_info">
                                        <p class="company" style="width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"><%= news.getCompName() %></p>
                                        <p class="title" style="width:100%; height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"><%= news.getTitle() %></p>
                                        <p class="btn_more"><a href="javascript:fn_move_view();"><img src="/hmg/images/web/kor/btn/btn_moreInfo.gif" alt="more" /></a></p>
                                    </div>
<%  } %>
                                </div>
                            </div>
                        </div>

<%  if (imageList != null && imageList.size() > 0) { %>
                        <div id="groupNews_thumbImg">
                            <ul>
<%
        for (int idx = 0; idx < imageList.size(); idx++) {
            FileVO image = imageList.get(idx);

            if (idx == 0)
                out.println("                                <li class=\"on\"><img src=\"" + image.getFilePath() + "\" /></li>");
            else if (idx + 1 == imageList.size())
                out.println("                                <li class=\"last\"><img src=\"" + image.getFilePath() + "\" /></li>");
            else
                out.println("                                <li><img src=\"" + image.getFilePath() + "\" /></li>");
        }
%>
                            </ul>
                        </div>
<%  } %>
                        <div id="groupNews_arrow">
<%
    if (prevNews != null)
        out.println("                            <span class=\"leftBig\"><a href=\"./NewsImageList.do?listID=" + prevNews.getListID() + "&listType=" + listType + "&compType=" + compType + "\"><img class=\"png24\" src=\"/hmg/images/web/kor/grn/left_Bigarrow.gif\" alt=\"left\"/></a></span>");

    if (nextNews != null)
        out.println("                            <span class=\"rightBig\"><a href=\"./NewsImageList.do?listID=" + nextNews.getListID() + "&listType=" + listType + "&compType=" + compType + "\"><img class=\"png24\" src=\"/hmg/images/web/kor/grn/right_Bigarrow.gif\" alt=\"right\"/></a></span>");
%>
                        </div>
                    </div>
                </div>

                <!-- detail image -->
                <div id="groupNews_detailImgWrap">
                    <div id="groupNews_detailImg">
                    <p class="count"><span class="text">게시글수</span> <span class="blue" id="currentNewsOrder">&nbsp;</span> / <span class="total"><%= nf.format(totalNews) %></span>건</p>
                        <ul id="thumbnailList"></ul>

                        <div class="moveSlideArea">
                            <div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="slider"><a style="left: 20%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
                        </div>
                        <div id="groupNews_arrow02">
                            <span class="leftSmall" id="leftArrow" style="display:none;"><a href="javascript:fn_move_list_left();"><img src="/hmg/images/web/kor/grn/left_arrow02.gif" alt="왼쪽으로 이동"/></a></span>
                            <span class="rightSmall" id="rightArrow" style="display:none;"><a href="javascript:fn_move_list_right();"><img src="/hmg/images/web/kor/grn/right_arrow02.gif" alt="오른쪽으로 이동"/></a></span>
                        </div>
                    </div>
                </div>
                <!-- //detail image -->
            </div>
            <!--// 내용 -->
            </div>
            <!--//contents-->
        </div>
        </div>
        <!--//container-->

        <hr />

        <!--footer-->
        <%@ include file="/WEB-INF/jsp/web/kor/include/footer.jspf" %>
        <!--//footer-->
        <hr />
        <!--notice-->
        <%@ include file="/WEB-INF/jsp/web/kor/include/notice.jspf" %>
        <!--//notice-->
    </div>
    <!--//wrap-->
</body>
</html>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            